<template>
	<view class="container">
		<view class="content">
			<view class="arrearage-title color-font-gray">欠费明细</view>
			<view class="uni-flex-center" v-for="items in roomBillDetail" :key="items">
				<view style="width: 90%;background: #ffffff;padding: 20rpx;margin: 20rpx;border-radius: 10rpx;">
					<view  style="margin-top: 20rpx;">
						<view  style="margin: 20rpx;">
							<view class="zaozao-row-between ">
								<view  style="width: 70%;">
									<view  style="line-height: 40rpx;font-size: 36rpx; font-weight:800;">{{items.cost_type_name}}</view>
								</view>
								<view  style="width: 30%;text-align: right;">
									<text class="uni-cell-lineheight-40 uni-font-32 uni-font-bold" ></text>
								</view>
							</view>
							<view  style="margin-top: 40rpx;" >
								<checkbox-group>
								<view class="zaozao-row zaozao-col-center zaozao-row-between " v-for="(item, index) in items.bill" :key="index" >
									<view style="width: 10%;">
										<image src="/static/img/check.png" style="width: 40rpx;height: 40rpx"
										v-if="billIds.indexOf(item.id) > -1" @click="changeSelectBill(item.id)"/>
										<image src="/static/img/uncheck.png" style="width: 40rpx;height: 40rpx" v-else @click="changeSelectBill(item.id)"/>
									</view>
									<view style="width: 60%;">
										<view style="line-height: 40rpx;">{{ item.acct_period }}</view>
									</view>
									<view style="width: 30%;text-align: right;">
										<text style="line-height: 40rpx;">{{ item.bill_entry_amount }}</text>
									</view>
								</view>
								</checkbox-group>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="pay-box">
			<view class="zaozao-row zaozao-col-center">
				<view class="color-font-gray uni-text-center" style="margin-left:20rpx">支付金额</view>
				<view class="uni-font-64 color-font-orange uni-text-center" style="margin-left:40rpx">¥{{ sumMoney }}</view>
				<view style="flex:1;">
					<button class="colorOrange bg-gradient-btn" @click="pay()">去支付</button>
				</view>
				
			</view>
		</view>
		<!-- <view class="uni-empty">*点击费用项可查看费用更多详情</view> -->
	</view>
</template>

<script>
import {getUnPayListByRoomId,getMoneySum,orderPay} from "@/api/bill.js";
export default {
	data() {
		return {
			roomId:0,
			price: '1',
			wgids:[],//物管id
			waterids:[],//水费id
			roomData:{},
			roomBillDetail:[],
			billIds:[],
			selectBill:[],
			sumMoney:0,
			//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
			paymentType: "",
			// 支付客户端 APP/NATIVE/JSAPI/H5
			paymentClient: "",
			//余额
		};
	},
	computed:{
		myRoom(){
		  return this.$store.state.myRoom;
		},
		// roomData(){
		// 	return this.$store.state.roomData;
		// },
		// roomDetail(){
		// 	let list = []
		// 	for (let var1 in this.roomData.qfinfo) {
		// 		let data={}
		// 		data.key = var1.replace(/\"/g,"");
		// 		let vals = [];
		// 		for (let var2 in this.roomData.qfinfo[var1]) {
		// 			if(var2 === 'wg'){ //物业费id
		// 				this.wgids.push(this.roomData.qfinfo[var1][var2].id);
		// 			}
		// 			if(var2 === 'water'){//水费id
		// 				this.waterids.push(this.roomData.qfinfo[var1][var2].id);
		// 			}
		// 			let val={}
		// 			val.title = this.roomData.qfinfo[var1][var2].table_type;
		// 			val.money = this.roomData.qfinfo[var1][var2].money;
		// 			vals.push(val)
		// 		}
		// 		data.val = vals;
		// 		list.push(data);
		// 	}
		// 	return list;
		// }
	},
	onLoad(options){
		// #ifdef APP-PLUS
		this.paymentType = "APP";
		this.paymentClient = "APP";
		//#endif
		// #ifdef MP-WEIXIN
		this.paymentType = "WECHAT_MP";
		this.paymentClient = "MP";
		//#endif
		// #ifdef MP-ALIPAY
		this.paymentType = "ALIPAY_MP";
		this.paymentClient = "MP";
		//#endif
		// #ifdef H5
		this.paymentType = "H5";
		//如果是微信浏览器，则使用公众号支付，否则使用h5，
		// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
		this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
		//#endif
		this.roomId=options.id;
		this.getBillList();
	},
	onShow() {
		
	},
	methods: {
		pay() {
		  console.log(this.billIds)
			if(this.billIds.length==0){
			  wx.showToast({
				title: "请选择要付款的账单",
				icon: '',
				duration: 2000
			  })
			  return ;
			}
			orderPay({billid:this.billIds,room_id:this.roomId,amount:this.sumMoney}).then((res)=>{
				if(res.data.code==0){
					uni.requestPayment({
						provider: this.paymentType,
						orderInfo: res.data.data || '',
						success: (e) => {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								title: "支付成功!",
							});
							//this.callback(paymentMethod)
						},
						fail: (e) => {
							console.log(this);
							this.exception = e;
							uni.hideLoading();
							uni.showModal({
								content: "支付失败,如果您已支付，请勿反复支付",
								showCancel: false,
							});
						},
					});
				}
				
				// wx.requestPayment({
				// 	timeStamp: res.data.timeStamp+"",
				// 	nonceStr: res.data.nonceStr,
				// 	package: res.data.package,
				// 	signType: res.data.signType,
				// 	paySign: res.data.paySign,
				// 	success: (re) => {
				// 	  console.log(res.data, 1)
				// 		console.log(re, 1)
				// 		wx.navigateTo({
				// 		  url: '../../index/index'
				// 		})
				// 	},
				// 	fail: (re) => {
					 
				// 	}
				// });
			})
		},
		changeSelectBill(id){
			let indexToRemove = this.billIds.indexOf(id);
			if(indexToRemove>=0){
				this.billIds.splice(indexToRemove, 1);
			}else{
				this.billIds.push(id);
			}
			if(this.billIds.length>0){
				this.getMoney();
			}else{
				this.sumMoney=0;
			}
			
			console.log(this.billIds); 
		},
		getMoney(){
			getMoneySum({billId:this.billIds}).then((res)=>{
				if(res.data.code==0){
					this.sumMoney=res.data.data.pay_money
				}
			})
		},
		getBillList(){
			getUnPayListByRoomId({room_id:this.roomId}).then((res)=>{
				if(res.data.code==0){
					this.roomData=res.data.data;
					this.sumMoney=this.roomData.sumMoney;
					this.roomBillDetail=this.roomData.roomBillDetail;
					this.billIds=this.roomData.billIds;
					this.selectBill=this.roomData.selectBill;
					console.log(this.roomBillDetail);
				}
			})
		},
		billTypeDetail(item) {
			this.$Router.push({name:'bill-type-detail',params:{data:item}})
		},
		payment() {
			let wgids = this.$uitls.unique(this.wgids);
			let waterids = this.$uitls.unique(this.waterids);
			const data ={
				// type	是	int	缴费类型 1房产类 2车位类
				// wgids	否	str	物管费欠费id,用逗号隔开；1,2,3
				// waterids	否	str	水费欠费id,用逗号隔开
				// eleids	否	str	电费欠费id,用逗号隔开
				type:'1',
				wgids:this.$uitls.toStrings(wgids),
				waterids:this.$uitls.toStrings(waterids),
				eleids:''
			}
		
		},
		getRoomsMaterials(){
			let data ={
				roomid:this.myRoom.roomid
			}
		}
	}
	
};
</script>

<style scoped lang="less">
.container{
	width: 100%;
	height: 100vh;
	position: relative;
	.content{
		height: calc(100% - 100px);
	}
}
.pay-box {
	position: absolute;
	left:0;
	right:0;
	bottom: 0;
	height: 200rpx;
	width: 100%;
	background: #ffffff;
}
.arrearage-title {
	margin: 30upx;
}
.colorOrange {
	color: #ffffff;
	height: 80upx;
	border-radius: 50upx;
	line-height: 80upx;
	margin: 40upx;
	padding: 0upx 60upx;
}

.bill-detail-content {
	
}
.rule {
	border-bottom: 1upx dashed #dddddd;
}
.user-list {
	margin-top: 100upx;
	margin: 20upx;
}
.user-list-cell {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 20upx;
}
.user-list-cell-right {
	line-height: 60upx;
	text-align: right;
	color: #898989;
	padding-left: 10upx;
}
.uni-empty {
	text-align: left;
	padding-left: 40upx;
	font-size: 22upx;
}
</style>
